iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

JS30自我學習筆記系列 第 29

第二十八、九堂 - Video Speed Controller & Countdown Timer

  • 分享至 

  • xImage
  •  

既然這系列叫JS30,就應該要有30堂課,但由於我第一天寫了個序,導致後面只剩29篇的quotaㄏㄏ。所以今天買一送一,給各位兩個實作,分別是影片速度控制器跟倒數計時器。

影片速度控制器

Imgur

影片速度控制器在之前第十一堂有使用過了,這次只是換個調整方式,是用mousemove的方法在右邊的bar滑動來調整。概念大同小異,就是如何在bar的元素中透過滑鼠的位置來得到正確的讀數。下面是實作範例:

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const height = Math.round(percent * 100) + '%';
    const playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + '×';
    video.playbackRate = playbackRate;
  }

speed.addEventListener('mousemove', handleMove);

倒數計時器

Imgur

倒數計時器的部分比較複雜些,其函式分為幾個部分:

  1. timer(seconds):輸入想要倒數的秒數,每秒抓取一次現在時間Date.now(),並呼叫下面的displayTimeLeft(seconds)。要注意這邊用到setInterval(),裡面必須是每次都重新抓取Date.now(),不能只是某個變數-1,因為當你切換頁籤到別的頁面,或是有時候滾輪離開畫面,setInterval就會暫停執行。所以這裡要每次抓新的時間,確保時間正確。
  2. displayTimeLeft(seconds):這裡就只是簡單的秒換成分+秒的換算,但有個小地方要注意,就是當秒數小於10時,十位數要補0。
  3. displayEndTime(timestamp):顯示倒數完畢時的時間。
  4. startTimer():讓各button觸發timer(seconds)

上一篇
第二十七堂 - Click and Drag
下一篇
第三十堂 - Whack A Mole
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言